<template>
  <div class="Yjresources">
    <div class="Yjresources_home">
      <div class="homePageCards">
        <div class="cardTitles">
          <div class="titleName">应急资源-队伍</div>
          <a @click="ResourceStatisticsList(0)">列表<i class="el-icon-d-arrow-right" color="#fff"></i></a>
        </div>
        <div class="mainBottom">
          <div class="flexBetween" style="height:20%">
            <div class="backgroundColor textCenter dwItemNum" @click="itemNumClick('dw', 1)">
              <div class="color008DFF fontWeight fontSize24 marginT5">{{ dwDataNums.onDeploy || 0 }}</div>
              <div class="white fontSize14">已调配</div>
            </div>
            <div class="backgroundColor textCenter dwItemNum" @click="itemNumClick('dw', 2)">
              <div class="colorF59066 fontWeight fontSize24 marginT5">{{ dwDataNums.onTheWay || 0 }}</div>
              <div class="white fontSize14">在途中</div>
            </div>
            <div class="backgroundColor textCenter dwItemNum" @click="itemNumClick('dw', 3)">
              <div class="colorFDDD67 fontWeight fontSize24 marginT5">{{ dwDataNums.onArrival || 0 }}</div>
              <div class="white fontSize14">已到达</div>
            </div>
          </div>
          <div id="Team" style="width:100%;height:80%">
            <!-- <BarCharts :option="option1" chartId="syteam1" barChartsId="syteam2" @barClick="barClickDw"></BarCharts> -->
            <BarCharts :option="option2" chartId="zwtzsd3" barChartsId="zwtzsd4" @barClick="barClickDw">
            </BarCharts>
          </div>
        </div>
      </div>
      <div class="homePageCards">
        <div class="cardTitles">
          <div class="titleName">应急资源-车辆</div>
          <a @click="ResourceStatisticsList(1)">列表<i class="el-icon-d-arrow-right" color="#fff"></i></a>
        </div>
        <div class="mainBottom">
          <div class="flexBetween" style="height:20%">
            <div class="backgroundColor textCenter dwItemNum" @click="itemNumClick('cl', 1)">
              <div class="color008DFF fontWeight fontSize24 marginT5">{{ carDataNums.onDeploy || 0 }}</div>
              <div class="white fontSize14">已调配</div>
            </div>
            <div class="backgroundColor textCenter dwItemNum" @click="itemNumClick('cl', 2)">
              <div class="colorF59066 fontWeight fontSize24 marginT5">{{ carDataNums.onTheWay || 0 }}</div>
              <div class="white fontSize14">在途中</div>
            </div>
            <div class="backgroundColor textCenter dwItemNum" @click="itemNumClick('cl', 3)">
              <div class="colorFDDD67 fontWeight fontSize24 marginT5">{{ carDataNums.onArrival || 0 }}</div>
              <div class="white fontSize14">已到达</div>
            </div>
          </div>
          <div id="Car" style="width:100%;height:80%">
            <BarCharts :option="option3" chartId="zwtzsd5" barChartsId="zwtzsd6" @barClick="barClickCar">
            </BarCharts>
          </div>
        </div>
      </div>
      <div class="homePageCards EDResours">
        <div class="cardTitles">
          <div class="titleName">应急资源-装备</div>
          <a @click="ResourceStatisticsList(2)">列表<i class="el-icon-d-arrow-right" color="#fff"></i></a>
        </div>
        <div class=" textSJ flexBetween">
          <ConeChart containerId="yjzyzb" :conedata="EquipmentData" v-if="isShowZYZB" @svgClick="svgClickZb"></ConeChart>
          <!-- <div class="lefttx">
            <div class="parent flexAround">
              <div>
                <img src="../../../assets/img/sjx.png" alt="" width="120px" height="145px" style="margin-top: 50px;">
              </div>
              <div class="pxsbx">
                <div class="pxsbxDiv one bgcolor008DFF">
                  <div class="white textCenter" @click="zbClick('0')">已调配 :{{ EquipmentData.onDeploy || 0 }}</div>
                </div>
                <div class="pxsbxDiv two bgcolorF59066">
                  <div class="white textCenter" @click="zbClick('1')">已到达 :{{ EquipmentData.onArrival || 0 }}</div>
                </div>
                <div class="pxsbxDiv three bgcolorFDDD67">
                  <div class="white textCenter" @click="zbClick('2')">在途中 :{{ EquipmentData.onTheWay || 0 }}</div>
                </div>
              </div>

            </div>
          </div> -->
        </div>
      </div>
      <div class="homePageCards EDResours">
        <div class="cardTitles">
          <div class="titleName">应急资源-物资</div>
          <a @click="ResourceStatisticsList(3)">列表<i class="el-icon-d-arrow-right" color="#fff"></i></a>
        </div>
        <div class=" textSJ flexBetween">
          <ConeChart containerId="yjzywz" :conedata="MaterialsData" v-if="isShowZYWZ" @svgClick="svgClickWz"></ConeChart>
          <!-- <div class="lefttx">
            <div class="parent flexAround">
              <div>
                <img src="../../../assets/img/sjx.png" alt="" width="120px" height="145px" style="margin-top: 50px;">
              </div>
              <div class="pxsbx">
                <div class="pxsbxDiv one bgcolor008DFF">
                  <div class="white textCenter" @click="wzClick('0')">已调配 :{{ MaterialsData.onDeploy || 0 }}</div>
                </div>
                <div class="pxsbxDiv two bgcolorF59066">
                  <div class="white textCenter" @click="wzClick('1')">已到达 :{{ MaterialsData.onArrival || 0 }}</div>
                </div>
                <div class="pxsbxDiv three bgcolorFDDD67">
                  <div class="white textCenter" @click="wzClick('2')">在途中 :{{ MaterialsData.onTheWay || 0 }}</div>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="Yjresources_right">
      <div class="homePageCarda" :style="{ 'height': mldHeight }" v-if="mldHeight">
        <div class="cardTitlea">
          <div class="titleName">响应命令单</div>
          <a @click="EmergencyResponselist">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
        </div>
        <div class="overflowY">
          <div v-for="(item, index) in Response.slice(0, 4)" :key="index" @click="goEmergencyResponseinfo(item.id)">
            <div class=" department backgroundColor NewEarlyWarn margin5-10 flexBetween padding10">
              <div class="LocalEW fontWeight">
                {{ item.responseName }}
              </div>
              <div v-if="item.responseState === '2'" style="color:#17FF66;fontSize:14px;width:60px">已发布</div>
              <div v-else-if="item.responseState === '4'" style="color:#ff1727;fontSize:12px;width:60px">已终止</div>
              <div class="Levelbtn">
                <button class="borderRed fontWeight" v-if="item.responseLvCode === '1'">{{ item.responseLvName }}</button>
                <button class="borderOrange fontWeight" v-if="item.responseLvCode === '2'">{{ item.responseLvName
                }}</button>
                <button class="borderYellow fontWeight" v-if="item.responseLvCode === '3'">{{ item.responseLvName
                }}</button>
                <button class="borderBlue fontWeight" v-if="item.responseLvCode === '4'">{{ item.responseLvName
                }}</button>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <el-dialog title="资源台账-队伍" :visible.sync="dialogZytzVisible" width="70%">
      <el-table :data="tableData222" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border height="600">
        <el-table-column type="index" width="60" align="center" label="序号" fixed></el-table-column>
        <el-table-column :prop="item.prop" align="center" :label="item.label" :width="item.width || '200'"
          v-for="(item, i) of dwColums" :key="i" show-overflow-tooltip :fixed="item.fixed">
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="资源台账-车辆" :visible.sync="dialogZyclVisible" width="70%">
      <el-table :data="tableData333" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border height="600">
        <el-table-column type="index" width="60" align="center" label="序号" fixed></el-table-column>
        <el-table-column :prop="item.prop" align="center" :label="item.label" :width="item.width || '200'"
          v-for="(item, i) of clColums" :key="i" show-overflow-tooltip :fixed="item.fixed">
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="资源台账-装备" :visible.sync="dialogZyzbVisible" width="70%">
      <el-table :data="tableData444" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border height="600">
        <el-table-column type="index" width="60" align="center" label="序号" fixed></el-table-column>
        <el-table-column :prop="item.prop" align="center" :label="item.label" :width="item.width || '200'"
          v-for="(item, i) of zbColums" :key="i" show-overflow-tooltip :fixed="item.fixed">
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="资源台账-物资" :visible.sync="dialogZywzVisible" width="70%">
      <el-table :data="tableData555" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border height="600">
        <el-table-column type="index" width="60" align="center" label="序号" fixed></el-table-column>
        <el-table-column :prop="item.prop" align="center" :label="item.label" :width="item.width || '200'"
          v-for="(item, i) of wzColums" :key="i" show-overflow-tooltip :fixed="item.fixed">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { GetResponse } from "@/api/EmergencyDisposal/homepagecontent.js";
import BarCharts from "@/components/highCharts/NewBarCharts";
import ConeChart from "./ConeChart.vue";
import { dwColums, clColums, zbColums, wzColums } from "./columns";
import { teamListPage, vehicleListPage, equipListPage, suppliesListPage, getResourceTeamData, getResourceVehicleData, getResourceEquipmentData, getResourceMaterialsData } from "@/api/EmergencyResources/EmergencyResources.js";
export default {
  name: "Yjresources",
  components: {
    ConeChart,
    BarCharts
  },
  data() {
    return {
      showBarCharts: false,
      showBarCharts2: false,
      activeName: "first",
      personOrgId: JSON.parse(sessionStorage.getItem("org")).orgId,
      mldHeight: 0,
      dwColums: [],
      clColums: [],
      zbColums: [],
      wzColums: [],
      dialogZytzVisible: false,
      dialogZyclVisible: false,
      dialogZyzbVisible: false,
      dialogZywzVisible: false,
      isShowZYWZ: false,
      isShowZYZB: false,
      tableData222: [],
      tableData333: [],
      tableData444: [],
      tableData555: [],
      data1: [5, 8, 4, 5], // 在途中
      data2: [26, 12, 22, 16], // 已到达
      xAxisData: [],
      xAxisDataCar: [],
      dwDataNums: {},
      carDataNums: {},
      EquipmentData: {},
      MaterialsData: {},
      data3: [33, 27, 24, 28, 10, 14], // 在途中
      data4: [13, 8, 11, 15, 10, 6], // 已到达
      Response: [],
      option2: {
        barWidth: 36, // 柱子宽度
        basePointX: 40,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        qyNum: 5,
        tooltipXandY: {
          ch1: 80,
          ch2: 20,
          ch3: 150,
          ch4: 30
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 36,
          bottom: 6
        },
        legends: ["在途中", "已到达"],
        legendPosition: "top",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "单位:(支)",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      option3: {
        barWidth: 36, // 柱子宽度
        basePointX: 40,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        qyNum: 5,
        tooltipXandY: {
          ch1: 80,
          ch2: 10,
          ch3: 136,
          ch4: 30
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 36,
          bottom: 6,
          containLabel: true
        },
        legends: ["在途中", "已到达"],
        legendPosition: "top",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "单位:(台)",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      }
    };
  },
  created() {
    this.dwColums = dwColums;
    this.clColums = clColums;
    this.zbColums = zbColums;
    this.wzColums = wzColums;
  },
  mounted() {
    const dom = document.querySelector(".Yjresources_right");
    const height = dom.offsetHeight;
    this.mldHeight = height + "px";
    this.getVehicleData(); // 初始化渲染echart图标
    this.getTeamDatas(); // 获取队伍信息
    this.GetResponses();
    this.getEquipmentData();
    this.getMaterialsData();
  },
  methods: {
    svgClickZb(data) {
      if (data === undefined || data === null) {
        console.log(data);
      } else {
        let val = 0;
        if (data.label === "已到达") {
          val = 3;
        } else if (data.label === "已调配") {
          val = 1;
        } else if (data.label === "在途中") {
          val = 2;
        }
        this.zbClick(val);
      }

    },
    svgClickWz(data) {
      if (data === undefined || data === null) {
        console.log(data);
      } else {
        let val = 0;
        if (data.label === "已到达") {
          val = 3;
        } else if (data.label === "已调配") {
          val = 1;
        } else if (data.label === "在途中") {
          val = 2;
        }
        this.wzClick(val);
      }
    },
    getEquipmentData(id) {
      const keyObjs = {
        onArrival: "已到达",
        onDeploy: "已调配",
        onTheWay: "在途中"
      };
      const arr = [];
      getResourceEquipmentData({ orgId: id || this.personOrgId }).then(res => {
        for (const key in res) {
          if (key.startsWith("on")) {
            arr.push({
              label: keyObjs[key],
              value: res[key] || 0
            });
          }
        }
        arr.sort((a, b) => a.value - b.value);
        this.EquipmentData = arr;
        this.isShowZYZB = true;
      });
    },
    getMaterialsData(id) {
      const keyObjs = {
        onArrival: "已到达",
        onDeploy: "已调配",
        onTheWay: "在途中"
      };
      const arr = [];
      getResourceMaterialsData({ orgId: id || this.personOrgId }).then(res => {
        for (const key in res) {
          if (key.startsWith("on")) {
            arr.push({
              label: keyObjs[key],
              value: res[key] || 0
            });
          }
        }
        arr.sort((a, b) => a.value - b.value);
        this.MaterialsData = arr;
        this.isShowZYWZ = true;
      });
    },
    getTeamDatas() {
      getResourceTeamData({ orgId: this.personOrgId }).then(res => {
        this.dwDataNums = {
          onArrival: res.onArrival,
          onDeploy: res.onDeploy,
          onTheWay: res.onTheWay
        };

        // this.initChart(); // 初始化渲染echart图标
        // const arr = res.resourceDateStateVos;
        // this.data1 = arr.map(item => item.onTheWay); // 在途中
        // this.data2 = arr.map(item => item.onArrival); // 已到达
        // this.xAxisData = arr.map(item => item.category);
        // this.chart1 = this.$echarts.init(document.getElementById("Team"));
        // this.initCharts(); // 初始化渲染echart图标
        const arr = res.resourceDateStateVos;
        this.data1 = arr.map(item => item.onTheWay); // 在途中
        this.data2 = arr.map(item => item.onArrival); // 已到达
        this.xAxisData = arr.map(item => item.category);
        this.option2.xAxis[0].data = this.xAxisData;
        this.data1.forEach((el, index) => {
          this.option2.series.push([el, this.data2[index]]);
          // this.option2.series = [
          //   [5, 20],
          //   [30, 50]
          // ];
        });
        this.showBarCharts = true;
      });
    },
    getVehicleData(id) {
      getResourceVehicleData({ orgId: this.personOrgId }).then(res => {
        this.carDataNums = {
          onArrival: res.onArrival,
          onDeploy: res.onDeploy,
          onTheWay: res.onTheWay
        };


        const arr = res.resourceDateStateVos;
        this.data1 = arr.map(item => item.onTheWay); // 在途中
        this.data2 = arr.map(item => item.onArrival); // 已到达
        this.xAxisData = arr.map(item => item.category);
        this.option3.xAxis[0].data = this.xAxisData;
        this.data1.forEach((el, index) => {
          this.option3.series.push([el, this.data2[index]]);
          // this.option3.series = [
          //   [5, 20],
          //   [5, 20],
          //   [15, 6],
          //   [5, 20],
          //   [30, 50]
          // ];
        });
        this.showBarCharts2 = true;
      });
    },
    zbClick(i) {
      const params = {
        pageNum: 1,
        pageSize: 500
      };
      if (i === 1) {
        // params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
        params.type = "sy";
        params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
        this.getEquipListPage(params);
      } else {
        params.occupation = i;
        params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
        this.getEquipListPage(params);
      }


    },
    wzClick(i) {
      const params = {
        pageNum: 1,
        pageSize: 500
      };
      if (i === 1) {
        // params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
        params.type = "sy";
        params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
        this.getSuppliesListPage(params);
      } else {
        params.occupation = i;
        params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
        this.getSuppliesListPage(params);
      }
      // params.occupation = i;
      // params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
      // this.getSuppliesListPage(params);
    },
    getSuppliesListPage(params) {
      suppliesListPage(params).then(res => {
        res.data.forEach(el => {
          if (el.occupation === 0) {
            el.ztmc = "待命";
          } else if (el.occupation === 1) {
            el.ztmc = "已调配";
          }
        });
        this.tableData555 = res.data;
        this.dialogZywzVisible = true;
      });
    },
    getEquipListPage(params) {
      equipListPage(params).then(res => {
        res.data.forEach(el => {
          if (el.occupation === 0) {
            el.ztmc = "待命";
          } else if (el.occupation === 1) {
            el.ztmc = "已调配";
          }
        });
        this.tableData444 = res.data;
        this.dialogZyzbVisible = true;
      });
    },
    itemNumClick(key, status) {
      const params = {
        pageNum: 1,
        pageSize: 500
      };
      if (key === "dw") {
        const ztlist = [
          { label: "可调配", value: 0 },
          { label: "已调配", value: 1 },
          { label: "在途中", value: 2 },
          { label: "已到达", value: 3 }
        ];
        if (ztlist[status].value === 1) {
          params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
          params.type = "sy";
          this.getTeamList(params);
        } else {
          params.occupation = ztlist[status].value;
          params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;

          this.getTeamList(params);
        }

      } else if (key === "cl") {
        if (status === 1) {
          params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
          params.type = "sy";
          this.getCarList(params);
        } else {
          params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
          params.occupation = status;
          this.getCarList(params);
        }

        // params.unitId = JSON.parse(sessionStorage.getItem("org")).orgId;
        // params.occupation = status;
        // this.getCarList(params);
      }
    },
    getTeamList(params) {
      teamListPage(params).then(res => {
        res.data.forEach(el => {
          if (el.occupation === 0) {
            el.ztmc = "可调配";
          } else if (el.occupation === 1) {
            el.ztmc = "已调配";
          } else if (el.occupation === 2) {
            el.ztmc = "在途中";
          } else if (el.occupation === 3) {
            el.ztmc = "已到达";
          }
        });
        this.tableData222 = res.data;
        this.dialogZytzVisible = true;
      });
    },
    barClickDw(barIndex, i) {
      if (this.option2.legends[i - 1] === "在途中") {
        this.itemNumClick("dw", 2, this.xAxisData[barIndex - 1]);
      } else {
        this.itemNumClick("dw", 3, this.xAxisData[barIndex - 1]);
      }
      // const occupation = j === 1 ? 2 : 3;
      // const params = {
      //   pageNum: 1,
      //   occupation,
      //   pageSize: 500,
      //   team: ""
      // };
      // // const majorList = ["配电", "输电", "营销", "建设", "后勤", "变电", "信通"];
      // // params.teamMajor = majorList[i - 1];
      // this.getTeamList(params);
    },
    barClickCar(barIndex, i) {
      console.log(this.option3.legends[i - 1], "this.option3.legends[i - 1]");
      if (this.option3.legends[i - 1] === "在途中") {
        this.itemNumClick("cl", 2, this.xAxisData[barIndex - 1]);
      } else {
        this.itemNumClick("cl", 3, this.xAxisData[barIndex - 1]);
      }
      // console.log(i, j);
      // const occupation = 1;
      // const params = {
      //   pageNum: 1,
      //   occupation,
      //   pageSize: 500
      // };
      // // const majorList = ["生产普通", "通讯指挥类", "抢修作业类", "应急救援类", "其他"];
      // // params.vehicleUsage = majorList[i - 1];
      // this.getCarList(params);
    },
    getCarList(params) {
      vehicleListPage(params).then(res => {
        res.data.forEach(el => {
          if (el.occupation === 0) {
            el.ztmc = "可调配";
          } else if (el.occupation === 1) {
            el.ztmc = "已调配";
          } else {
            el.ztmc = "";
          }
        });
        this.tableData333 = res.data;
        this.dialogZyclVisible = true;
      });
    },
    // 队伍
    initCharts() {
      //  获取数据
      const data1 = this.data1;
      const data2 = this.data2;
      const datas = [data1, data2];
      const obj = {};
      datas.reduce((pre, cur, index) => {
        if (index === 4) return [];
        pre = cur.map((item, i) => pre[i] ? pre[i] + item : item);
        obj[`data${index + 1}`] = pre;
        return pre;
      }, []);
      this.chart1.setOption(
        {
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,24,34,0.25)",
            borderWidth: 0,
            textStyle: {
              color: "#fff"
            },
            formatter(params) {

              const finishedCount = data1[params.dataIndex];
              const unFinishedCount = data2[params.dataIndex];
              return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div><div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #F59066;border-radius: 50%;margin-right: 10px'></div>在途中: ${finishedCount}人</div><div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #fbd180;border-radius: 50%;margin-right: 10px'></div>已到达: ${unFinishedCount}人</div>`;
            }
          },
          legend: {
            itemGap: 5, // 图例之间的间隔
            selectedMode: false, // 是否可选择图例
            top: "10%",
            right: "5%",
            itemWidth: 15,
            itemHeight: 15,
            formatter: (name) => `{a|${name}} `,
            textStyle: {
              align: "left",
              backgroundColor: "transparent",
              color: "#fff",
              fontSize: 14,
              rich: {
                a: {
                  width: 55,
                  fontSize: 14,
                  lineHeight: 14
                }
              }
            }
          },
          grid: {
            left: "2%",
            right: "4%",
            top: "30%",
            bottom: "0%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            data: this.xAxisData,
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          },
          yAxis: [
            {
              type: "value",
              name: "单位：人",
              nameTextStyle: {
                color: "#fff"
              },
              splitLine: {
                lineStyle: {
                  width: 1,
                  color: ["#666"],
                  type: "dashed"
                }
              },
              min: 0,
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#22588F"
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          series: [
            {
              name: "在途中",
              data: datas[0],
              type: "bar",
              stack: "plan",
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F58888"
                    },
                    {
                      offset: 1,
                      color: "#F59066"
                    }
                  ]
                }
              }
            },
            {
              name: "已到达",
              data: datas[1],
              type: "bar",
              stack: "plan",
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ffb000"
                    },
                    {
                      offset: 1,
                      color: "#fbd180"
                    }
                  ]
                }
              }
            },
            {
              data: [0, 0, 0, 0, 0, 0],
              type: "pictorialBar",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: "#F57777"
                }
              }
            },
            {
              data: obj.data1,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#F56666"
                      },
                      {
                        offset: 1,
                        color: "#F59066"
                      }
                    ]
                  }
                }
              }
            },
            {
              data: obj.data2,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ffb000"
                      },
                      {
                        offset: 1,
                        color: "#fbd180"
                      }
                    ]
                  }
                }
              }
            }
          ]
        }
      );
      this.chart1.on("click", (params) => {
        this.barClickDw(params.dataIndex, params.seriesIndex);
      });
    },
    // 车辆
    initChart() {
      //  获取数据
      //  获取数据
      const data1 = this.data3;
      const data2 = this.data4;
      const datas = [data1, data2];
      const obj = {};
      datas.reduce((pre, cur, index) => {
        if (index === 4) return [];
        pre = cur.map((item, i) => pre[i] ? pre[i] + item : item);
        obj[`data${index + 1}`] = pre;
        return pre;
      }, []);
      this.chart2.setOption(
        {
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,24,34,0.25)",
            borderWidth: 0,
            textStyle: {
              color: "#fff"
            },
            formatter(params) {

              const finishedCount = data1[params.dataIndex];
              const unFinishedCount = data2[params.dataIndex];
              return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div><div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #F59066;border-radius: 50%;margin-right: 10px'></div>在途中: ${finishedCount}台</div><div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #fbd180;border-radius: 50%;margin-right: 10px'></div>已到达: ${unFinishedCount}台</div>`;
            }
          },
          legend: {
            itemGap: 5, // 图例之间的间隔
            selectedMode: false, // 是否可选择图例
            top: "10%",
            right: "5%",
            itemWidth: 15,
            itemHeight: 15,
            formatter: (name) => `{a|${name}} `,
            textStyle: {
              align: "left",
              backgroundColor: "transparent",
              color: "#fff",
              fontSize: 14,
              rich: {
                a: {
                  width: 55,
                  fontSize: 14,
                  lineHeight: 14
                }
              }
            }
          },
          grid: {
            left: "1%",
            right: "3%",
            top: "30%",
            bottom: "0%",
            containLabel: true
          },
          xAxis: [
            {
              type: "category",
              nameTextStyle: {
                color: "#fff"
              },
              data: [
                "生产普通",
                "不停电作业类",
                "应急救援类",
                "抢修作业",
                "通讯指挥类",
                "设备检测类"
              ],
              axisLine: {
                lineStyle: {
                  color: "#22588F"
                }
              },
              axisLabel: {
                // x轴文字的配置
                show: true,
                interval: 0, // 使x轴上的文字显示完全,
                textStyle: {
                  color: "#fff"
                },
                formatter: function (params) {
                  var newParamsName = "";
                  var paramsNameNumber = params.length;
                  var provideNumber = 2;// 一行显示几个字 然后就超过字数就会自动换行
                  if ((paramsNameNumber / 2) > 2) {
                    provideNumber = 3;
                  }
                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                  if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                      } else {
                        tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;
                    }
                  } else {
                    newParamsName = params;
                  }
                  return newParamsName;
                }
              }
            }
          ],
          yAxis:
          {
            type: "value",
            name: "单位：台",
            nameTextStyle: {
              color: "#fff"
            },
            splitLine: {
              lineStyle: {
                width: 1,
                color: ["#666"],
                type: "dashed"
              }
            },
            min: 0,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff"
              }
            }
          },
          series: [
            {
              name: "在途中",
              data: datas[0],
              type: "bar",
              stack: "plan",
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#F58888"
                    },
                    {
                      offset: 1,
                      color: "#F59066"
                    }
                  ]
                }
              }
            },
            {
              name: "已到达",
              data: datas[1],
              type: "bar",
              stack: "plan",
              barWidth: 20,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ffb400"
                    },
                    {
                      offset: 1,
                      color: "#fbd180"
                    }
                  ]
                }
              }
            },
            {
              data: [0, 0, 0, 0, 0, 0],
              type: "pictorialBar",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: "#F57777"
                }
              }
            },
            {
              data: obj.data1,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#F56666"
                      },
                      {
                        offset: 1,
                        color: "#F59066"
                      }
                    ]
                  }
                }
              }
            },
            {
              data: obj.data2,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [20, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ffb000"
                      },
                      {
                        offset: 1,
                        color: "#fbd180"
                      }
                    ]
                  }
                }
              }
            }
          ]
        });
      this.chart2.on("click", (params) => {
        this.barClickCar(params.dataIndex, params.seriesIndex);
      });
    },
    async GetResponses() { // 命令单
      const res = await GetResponse({ type: "sy" });
      this.Response = res;
    },
    ResourceStatisticsList(i) {
      const arr = ["TeamLedger", "VehiclesLedger", "EquipManagement", "MaterialManagement"];
      this.$store.commit("SET_MenuIndex", "8");
      this.$router.push({
        path: `/${arr[i]}`
      });
    },
    EmergencyResponselist() {
      this.$store.commit("SET_MenuIndex", "4");
      this.$router.push({
        name: "EmergencyResponselist"
      });
    },
    goEmergencyResponseinfo(id) {
      this.$store.commit("SET_MenuIndex", "4");
      this.$router.push({
        name: "EmergencyResponseinfo",
        query: {
          id: id
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/EmergencyDisposal/EDManagement.less";

:deep(.el-tabs--top.el-tabs--card > .el-tabs__header) {
  border-bottom: none;

  .el-tabs__item {
    color: #fff;
    padding: 0;
    width: 20%;
    height: auto;
    line-height: 30px;
    border: 1px solid #14a8ed;
    padding-left: 0;
    text-align: center;
    border-radius: 4px;

    &:nth-child(2) {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }
  }

  .el-tabs__nav {
    float: none;
    display: flex;
    justify-content: space-around;
    margin: 20px;
    border: none;
  }

  .el-tabs__item.is-active {
    border-bottom: #14a8ed;
    background-color: #14a8ed;
  }
}

.overflowY {
  flex: 1;
  overflow-y: auto;
}

.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.el-tabs__content) {
    flex: 1;
  }
}

.Yjresources {
  display: flex;
  height: 100%;
  padding-bottom: 10px;
  box-sizing: border-box;
  // justify-content: space-between;
}

.Yjresources_home {
  width: 72%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.Yjresources_right {
  width: 29%;
  height: 100%;
  margin-left: 18px;
  border: 1px #0649d7 solid;
  border-radius: 5px;

  .homePageCarda {
    width: 100%;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
  }

  .cardTitlea {
    height: 30px;
    line-height: 30px;
    background-color: rgba(38, 92, 255, 0.45);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
  }

  .cardTitlea a {
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    cursor: pointer;
  }
}

.homePageCards {
  width: 24%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px #0649d7 solid;
  border-radius: 5px;
}

.cardTitles {
  // height: 15%;
  height: 30px;
  line-height: 30px;
  background-color: rgba(38, 92, 255, 0.45);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
}

.cardTitles a {
  color: #fff;
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
}

.mainBottom {
  width: 98%;
  flex: 1;
  display: flex;
  flex-direction: column;
  // height: 68%;
}

.EDResours {
  .textSJ {
    height: calc(100% - 32px);
  }

  .leftNum {
    font-style: italic;
    font-size: 28px;
    padding: 6% 10%;
  }

  .lefttx {
    width: 80%;
    height: 30%;
    margin: 0 auto;

    .parent {
      height: 100%;
      justify-content: center;

      .ti.dtx {
        position: relative;
        width: 25%;
        height: 80%;
        margin-right: 10px;
        transform: rotate(180deg);
      }

      .ti.xtx {
        position: relative;
        width: 18%;
        height: 80%;
        margin-right: 10px;
        transform: rotate(180deg);

        &:before,
        &:after {
          background-color: #f59066;
          bottom: 36%;
        }
      }

      .ti.sjx {
        position: relative;
        width: 10%;
        height: 76%;
        margin-right: 10px;
        transform: rotate(180deg);

        &:before,
        &:after {
          background-color: #fddd67;
          bottom: 35%;
        }
      }

      .ti:before,
      .ti:after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        bottom: 25%;
        background-color: #008dff;
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
      }

      .ti:before {
        left: 0;
        transform: skew(-15deg);
        -webkit-transform: skew(15deg);
      }

      .ti:after {
        right: 0;
        transform: skew(15deg);
        -webkit-transform: skew(-15deg);
      }

      .ct {
        position: relative;
        text-align: center;
        bottom: 10%;
        left: -6%;
        z-index: 10;
        color: #fff;
        transform: rotate(180deg);
      }

      .pxsbx {
        width: 60%;
        height: 80%;
        transform: skewX(-20deg);
        margin-top: 36px;

        .pxsbxDiv {
          >div {
            transform: skewX(20deg);
            line-height: 190%;
            height: 44px;
            line-height: 44px;
            cursor: pointer;
          }
        }
      }

      .pxsbx .one {
        position: relative;
        top: 14px;
        left: 3%;
      }

      .pxsbx .two {
        position: relative;
        top: 20px;
        left: 2.7%;
      }

      .pxsbx .three {
        position: relative;
        top: 26px;
        left: 2.1%;
      }
    }
  }
}

:deep(div::-webkit-scrollbar-track) {
  border-radius: 0;
  background: transparent;
}

:deep(div::-webkit-scrollbar-thumb) {
  border-radius: 10px;
  box-shadow: none;
  background: rgba(215, 215, 215, 0.4);
}

:deep(div::-webkit-scrollbar) {
  width: 5px;
}

:deep(::-webkit-scrollbar-corner) {
  background: transparent;
}

:deep(.el-dialog__header) {
  background: #5077ff;

  .el-dialog__title {
    color: #fff;
  }

  .el-dialog__headerbtn {
    top: 5px;
    font-size: 30px !important;
  }

  .el-icon-close {
    color: #fff;
  }

  padding: 10px;
}

:deep(.el-dialog__body) {
  padding: 10px;
}

:deep(.el-table__fixed) {
  height: 580px !important;
}

.dwItemNum {
  width: 25%;
  cursor: pointer;
}
</style>
